<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>家长课堂</title>
		<meta name="viewport" content="width=device-width, initial-scale=0.5,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<style>
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			*{
				font-size: 30px;
				font-family: "微软雅黑";
			}
			
			.mui-col-xs-3,
			.mui-control-content {
				overflow-y: auto;
				height: 80%;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			
			#dv_con_left div a {
				margin-bottom: 40px;
				height: 20%;
				font-size: 26px;
				text-align: center;
			}
			/**
			 * 提示框
			 */
			
			.mui-popup {
				width: 440px;
				height: 242px;
			}
			
			.mui-popup-inner {
				padding: 30px;
				height: 50%;
				border-radius: 13px 13px 0 0;
			}
			
			.mui-popup-title {
				font-size: 38px;
				font-weight: 500;
				height: 50px;
				text-align: center;
			}
			
			.mui-popup-title+.mui-popup-text {
				font-family: inherit;
				font-size: 28px;
				height: 40px;
				margin: -4px 0 0;
			}
			
			.mui-popup-buttons {
				position: relative;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				height: 50%;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
			}
			
			.mui-popup-button {
				font-size: 34px;
				line-height: 44px;
				position: relative;
				display: block;
				overflow: hidden;
				box-sizing: border-box;
				width: 100%;
				height: 70px;
				padding: 10px 5px;
				cursor: pointer;
				text-align: center;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: #007aff;
				background: rgba(255, 255, 255, .95);
				-webkit-box-flex: 1;
			}
			
			.mui-toast-container {
				bottom: 20% !important;
				/*离布局底部的距离*/
			}
			
			.mui-toast-message {
				background: url(../img/indicator_input_error.png) no-repeat center 10px #000;
				/*toast的背景图片*/
				opacity: 0.7;
				/*toast中背景色的透明度*/
				color: #FFFFFF;
				/*toast中字体颜色*/
				width: 180px;
				/*toast宽度*/
				/*padding: 50px 5px 10px 5px;*/
				/*toast中文字的位置*/
				font-size: 24px;
				height: 40px;
			}
		</style>
	</head>
	<script type="text/javascript" charset="utf-8" src="http://yuntv.letv.com/player/vod/bcloud.js"></script>

	<body style="width: 100%; height: 100%;">

		<div id="dv_body" style="width: 100%; height: 80%;">
			<!--
        	作者：xuzhao_deng@sina.com
        	时间：2016-12-06
        	描述：微校园图片搜索
        	-->
			<div id="dv_jzktImg" style="margin-top: 12px; width: 100%; height: 20%;">
				<img src="../../img/jzkt/weixiaoyuanguanggao_02.png" style="width: 100%;" height="300" />
			</div>

			<div id="dv_jzktContent">
				<div class="mui-content mui-row" style="height: 100%;">
					<!--
                	作者：xuzhao_deng@sina.com
                	时间：2016-12-07
                	描述：左边功能导航区
                    -->
					<div id="dv_con_left" class="mui-col-xs-3" style="background: url(../../img/jzkt/lankuang_02.png); width: 20%; height: 100%;">
						<div style="list-style: none; text-align: center; margin-bottom: 60px; height: 950px;" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
							<a>
								<br /><br />
							</a>
							<a id="dv_bar_grzx" class="mui-control-item mui-active" href="#jzkt-zjjz-content">
								<img src="../../img/jzkt/zhuanjiajiangzuo_03.png"><br />
								<span>专家讲座</span>
							</a>
							<a id="commonProblem" class="mui-control-item">
								<img src="../../img/jzkt/changjianwenti_03.png"><br />
								<span>常见问题</span>
							</a>
							<a class="mui-control-item" href="#jzkt-yls-content">
								<img src="../../img/jzkt/jiazhangbixiu-white_06.png"><br />
								<span>阅览室</span>
							</a>
							<!--<a class="mui-control-item" href="#jzkt-jzbx-content">
								<img src="../../img/jzkt/jiazhangbixiu-bai_03.png"><br />
								<span>家长必修</span>
							</a>-->
							<br /><br /><br /><br /><br /><br /><br /><br />
						</div>
					</div>
					<!--
                	作者：xuzhao_deng@sina.com
                	时间：2016-12-07
                	描述：右边内容区
                	-->
					<div class="mui-col-xs-9" style="width: 80%; float: left;">

						<!--
                    	作者：xuzhao_deng@sina.com
                    	时间：2016-12-07
                    	描述：专家讲座
                    	-->
						<!--<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-chevron">
									
								</ul>
							</div>
						</div>-->

						<div id="jzkt-zjjz-content" class="mui-control-content mui-active" style="width: 100%; height: 920px;">
							<!--<div id="pullrefresh-zjjz" class="mui-content mui-scroll-wrapper">
								<div class="mui-scroll">
									<div id="dv-lst-video" class="mui-table-view mui-table-view-chevron">
										
									</div>
								</div>
							</div>-->
							<div id="rfc-expLecLst" class="mui-scroll-wrapper" style="width: 100%; margin: 0px;">
								<div id="dv-lst-video" class="mui-scroll" style="width: 100%;">
									<!--
                                    	作者：xuzhao_deng@sina.com
                                    	时间：2016-12-22
                                    	描述：专家讲座视频列表
                                    -->
								</div>
							</div>
						</div>

						<!--
                    	作者：xuzhao_deng@sina.com
                    	时间：2016-12-07
                    	描述：常见问题
                    	-->
						<div id="jzkt-cjwt-content" class="mui-control-content">
							<br />
							<ul id="bigCPLst" class="mui-table-view mui-table-view-chevron">

							</ul>

						</div>

						<!--
                    	作者：xuzhao_deng@sina.com
                    	时间：2016-12-07
                    	描述：阅览室
                    	-->
						<div id="jzkt-yls-content" class="mui-control-content">
							<div style="padding: 10px 10px;">
								<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-positive" style="font-size: 32px; background-color: #F1F4F7;">
									<a class="mui-control-item mui-active" href="#dv-yls-hwsc">好文收藏</a>
									<a class="mui-control-item" href="#dv-yls-hssc">好书收藏</a>
									<!--
                                    	作者：xuzhao_deng@sina.com
                                    	时间：2016-12-20
                                    	描述：<a class="mui-control-item" href="#dv-yls-jcsp">精彩视频</a> 
                                    -->
								</div>
							</div>

							<div id="dv-yls-contents">
								<div id="dv-yls-hwsc" class="mui-control-content mui-active">
									<div id="rfc-goodTxtLst" >
										<ul id="ul-goodTxtLst" class="mui-table-view mui-table-view-chevron">

										</ul>
									</div><br />
									<div class="weui_cell" style="height:42px;background-size:cover;">
										<span class="" style="float:right;margin-right: 10px; font-size: 39px;"><a href="good-txt.html">更多...</a></span>								
									</div><br />
								</div>

								<div id="dv-yls-hssc" class="mui-control-content">
									<div id="rfc-goodBooksLst">
										<ul id="ul-goodBooksLst" class="mui-table-view mui-table-view-chevron">

										</ul>
									</div><br />
									<div class="weui_cell" style="height:42px;background-size:cover;">
										<span class="" style="float:right;margin-right: 10px; font-size: 39px;"><a href="good-books.html">更多...</a></span>								
									</div><br />
								</div>

								<div id="dv-yls-jcsp" class="mui-control-content">
									<ul class="mui-table-view mui-table-view-chevron"><br />
										<li class="mui-table-view-cell mui-media">
											<a class="mui-navigate-right" style="display: flex;">
												<img src="../../img/jzkt/cbd.jpg" style="height: 110px; width: 110px;">
												<div class="mui-media-body">
													<span style="font-size: 26px;">&nbsp;&nbsp;华山论剑</span><br /><br />
													<p style="font-size: 24px;" class='mui-ellipsis'>&nbsp;&nbsp;作者：岳不群</p><br />
													<p style="font-size: 22px;" class='mui-ellipsis'>&nbsp;&nbsp;推荐人:林平之 &nbsp;&nbsp;&nbsp;&nbsp;发布时间：2016.12.08</p>
												</div>
											</a>
										</li>
										<li class="mui-table-view-cell mui-media">
											<a class="mui-navigate-right" style="display: flex;">
												<img src="../../img/jzkt/cbd.jpg" style="height: 110px; width: 110px;">
												<div class="mui-media-body">
													<span style="font-size: 26px;">&nbsp;&nbsp;华山论剑</span><br /><br />
													<p style="font-size: 24px;" class='mui-ellipsis'>&nbsp;&nbsp;作者：岳不群</p><br />
													<p style="font-size: 22px;" class='mui-ellipsis'>&nbsp;&nbsp;推荐人:林平之 &nbsp;&nbsp;&nbsp;&nbsp;发布时间：2016.12.08</p>
												</div>
											</a>
										</li>
										<li class="mui-table-view-cell mui-media">
											<a class="mui-navigate-right" style="display: flex;">
												<img src="../../img/jzkt/cbd.jpg" style="height: 110px; width: 110px;">
												<div class="mui-media-body">
													<span style="font-size: 26px;">&nbsp;&nbsp;华山论剑</span><br /><br />
													<p style="font-size: 24px;" class='mui-ellipsis'>&nbsp;&nbsp;作者：岳不群</p><br />
													<p style="font-size: 22px;" class='mui-ellipsis'>&nbsp;&nbsp;推荐人:林平之 &nbsp;&nbsp;&nbsp;&nbsp;发布时间：2016.12.08</p>
												</div>
											</a>
										</li>
									</ul>
								</div>

							</div>
						</div>

						<!--
                    	作者：xuzhao_deng@sina.com
                    	时间：2016-12-07
                    	描述：家长必修
                    	-->
						<div id="jzkt-jzbx-content" class="mui-control-content" style="">
							<video style="" controls="controls" src="http://yuntv.letv.com/bcloud.html?uu=ts1nlqzwrw&vu=809eba56c7&auto_play=1&width=640&height=360&lang=zh_CN">

							</video>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/utils/http.utils.js"></script>
	<script>
		/*var $count = 0;
				mui.init({
					pullRefresh: {
						container: "#pullrefresh-zjjz",
						up: {
							contentrefresh: "正在加载...",
							callback: fun_zjjz_pupref
						}
					}
				});
				
				function fun_zjjz_pupref() {
					setTimeout(function() {
						//mui('#pullrefresh-zjjz').pullRefresh().endPullupToRefresh((++$count > 2)); //参数为true代表没有更多数据了。
						fun_loadZJVideoLst();
					}, 1500);
				}
				
				if (mui.os.plus) {
					mui.plusReady(function() {
						setTimeout(function() {
							mui("#pullrefresh-zjjz").pullRefresh().pullupLoading();
						}, 1000);

					});
				} else {
					mui.ready(function() {
						mui("#pullrefresh-zjjz").pullRefresh().pullupLoading();
					});
				}*/

		var $pCurr = 0;

		mui.init({
			pullRefresh: {
				container: "#rfc-expLecLst",
				up: {
					height: 2,
					auto: true,
					contentnomore: "加载中...",
					callback: fun_loadUpEepLecLst
				}
			}
		});
		
	
	

		function fun_loadUpEepLecLst() {
			fun_loadZJVideoLst($pageSize, $pCurr);
			mui("#rfc-expLecLst").pullRefresh().endPullupToRefresh(false); // 加载数据最没有更多内容
		}

		window.onload = function() {
		
			//fun_loadZJVideoLst();

			fun_loadBigCpLsts();

			fun_loadGoodTxtData();

			fun_loadGoodBooksData();
			
		}

		function fun_loadZJVideoLst($pSize, $cpage) {
			//获取视频列表
			mui.ajax({
				url: $request_url.getVideoLst,
				dataType: "json",
				type: "get",
				headers: {
					"Authorization": $headers_authorization
				},
				data: {
					mediaType: "video",
					typeCode: "ZJJZ",
					orgId: "",
					rows: $pSize,
					page: $cpage
				},
				success: function(dat) {
					if(dat.code == 0) {
						var $videoLst = dat.result;
						if($videoLst != null && $videoLst.length > 0) {
							var $vlstDoc = document.getElementById("dv-lst-video");
							for(var i = 0; i < $videoLst.length; i++) {
								var $vlstDv = document.createElement('div');
								$vlstDv.innerHTML = fun_zjjzLstTem($videoLst[i], i);
								$vlstDoc.appendChild($vlstDv);
							}
							$pCurr++;
						} else {
							mui.toast("无数据来源");
						}
					}
				},
				error: function(err) {
					mui.toast("服务器繁忙....");
				}
			});
		}

		//视频列表模板
		function fun_zjjzLstTem(vidInfo, num) {
			var $vidInfoHtml =
				'<div style="text-align: left; margin-left: 5px; width: 98%;">' +
				'<a style="color: black;" href="jzkt-videoDetailed.html?vid=' + vidInfo.id + '"><div id="dv-zjjz-video" style="text-align: center;"><br />' +
				'<img style="width: 97%; height: 280px" src ="' + vidInfo.thumbnail + '"/>' +
				'</div>' +
				'<span style="font-size: 32px; text-align: left; line-height: 130%;margin-top:5px;">' + vidInfo.title + '</span></a><br />' +
				'<p style="font-size: 30px; color: #616161; line-height: 130%; text-indent: 2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">' +
				vidInfo.contentAbstract +
				'</p>' +
				'<div>' +
				'<span style="float: left; color: #616161;">作者:' + vidInfo.origin + '</span>' +
				'<span style="text-align: center; margin-left: 100px; margin-right: 100px; color: #616161;"><img src="../../img/jzkt/yanjing_03.png">阅读量：' + vidInfo.readCount + '</span>' +
				'<span style="float: right;"><img src="../../img/jzkt/pingluntubiao_03.png"></span>' +
				'</div><br />' +
				'<hr />' +
				'</div>';
			return $vidInfoHtml;
		}
		
		mui('#dv-lst-video').on("tap", "a", function(){
			mui.openWindow({
				url : this.href
			});
		});
		
		document.getElementById("")

		function fun_ComProTem(cpInfo, num) {
			var $cpInfoHtml =
				'<li class="mui-table-view-cell mui-media">' +
				'<a href="problem-lst.html?bpcode=' + cpInfo.code + '" class="mui-navigate-right" style="display: flex;">' +
				'<div><img src="../../img/jzkt/cbd.jpg" style="height: 110px; width: 110px;"></div>' +
				'<div class="" style="margin-left: 20px; margin-top:0px;">' +
				'<span style="font-size: 32px; display:block;">&nbsp;&nbsp;' + cpInfo.title + '</span><br/>' +
				'<span style="font-size: 30px; color: #616161;" class="mui-ellipsis">&nbsp;&nbsp;' + cpInfo.description + '</span><br/><br/>' +
				'<span style="font-size: 28px; color: #616161;" class="mui-ellipsis">&nbsp;&nbsp;' + cpInfo.faqNum + '个问题</span>' +
				'</div>' +
				'</a>' +
				'</li>';

			return $cpInfoHtml;
		}

		function fun_loadBigCpLsts() {
			mui.ajax({
				url: $request_url.getBigComProLst,
				type: "get",
				headers: {
					"Authorization": $headers_authorization
				},
				data: {
					orgId: ""
				},
				dataType: "json",
				success: function(dat) {
					if(dat.code == 0) {
						var $cpTem = document.getElementById("bigCPLst");
						var $cpLsts = dat.result
						for(var i = 0; i < $cpLsts.length; i++) {
							var $cpLi = document.createElement('li');
							$cpLi.innerHTML = fun_ComProTem($cpLsts[i], i);
							$cpTem.appendChild($cpLi);
						}
						document.getElementById("commonProblem").href = "#jzkt-cjwt-content";
					}
				},
				error: function(err) {

				}
			});
		}

		function fun_goodTxtTem($txt, num) {
			var $goodTxtTem =
				'<li class="mui-table-view-cell mui-media">' +
				'<a href="jzkt-goodTxtDetailed.html?txtid=' + $txt.id + '" class="mui-navigate-right" style="display: flex;">' +
				'<div><img src="' + $txt.thumbnail + '" style="height: 130px; width: 130px;"></div>' +
				'<div class="mui-media-body" style=""><br />' +
				'<span style="font-size: 32px;">&nbsp;&nbsp;' + $txt.title + '</span><br /><br />' +
				'<span style="font-size: 30px; color: #616161;" class="mui-ellipsis">&nbsp;&nbsp;作者：' + $txt.origin + '</span><br /><br/>' +
				'<span style="font-size: 28px; color: #616161;" class="mui-ellipsis">&nbsp;&nbsp;推荐人:' + $txt.origin + '</span>' +
				'</div>' +
				'</a>' +
				'</li><br/>';
			return $goodTxtTem;
		}

		function fun_loadGoodTxtData() {
			mui.ajax({
				url: $request_url.getGoodTxtLst,
				type: "get",
				headers: {
					"Authorization": $headers_authorization
				},
				data: {
					orgId: "",
					typeCode: "HWSC",
					rows: 5,
					page: 0
				},
				dataType: "json",
				success: function(dat) {
					if(dat.code == 0) {
						var $GoodTxtDoc = document.getElementById("ul-goodTxtLst");
						var $goodTxtLst = dat.result
						if($goodTxtLst != null && $goodTxtLst.length > 0) {
							for(var i = 0; i < $goodTxtLst.length; i++) {
								var $gTxtLi = document.createElement('li');
								$gTxtLi.innerHTML = fun_goodTxtTem($goodTxtLst[i], i);
								$GoodTxtDoc.appendChild($gTxtLi);
							}
						} else {
							document.getElementById("ul-goodTxtLst").innerHTML = "<span style='text-align: center;'>暂无好文</span>";
						}
					} else {
						document.getElementById("ul-goodTxtLst").innerHTML = "<span style='text-align: center;'>暂无好文</span>";
					}
				},
				error: function(err) {

				}
			});
		}

		function fun_goodBooksTem($books, num) {
			var $goodBooksTem =
				'<li class="mui-table-view-cell mui-media">' +
				'<a href="jzkt-goodBooksDetailed.html?booksid=' + $books.id + '" class="mui-navigate-right" style="display: flex;">' +
				'<img src="' + $books.thumbnail + '" style="height: 130px; width: 130px;">' +
				'<div class="mui-media-body"><br />' +
				'<span style="font-size: 32px;">&nbsp;&nbsp;' + $books.title + '</span><br /><br />' +
				'<span style="font-size: 30px; color: #616161;" class="mui-ellipsis">&nbsp;&nbsp;作者：' + $books.origin + '</span><br /><br/>' +
				'<span style="font-size: 28px; color: #616161;" class="mui-ellipsis">&nbsp;&nbsp;推荐人:' + $books.origin + '</span>' +
				'</div>' +
				'</a>' +
				'</li><br/>';
			return $goodBooksTem;
		}

		function fun_loadGoodBooksData() {
			mui.ajax({
				url: $request_url.getGoodBooksLst,
				type: "get",
				headers: {
					"Authorization": $headers_authorization
				},
				data: {
					orgId: "",
					typeCode: "HSSC",
					rows: 5,
					page: 0
				},
				dataType: "json",
				success: function(dat) {
					if(dat.code == 0) {
						var $GoodBooksDoc = document.getElementById("ul-goodBooksLst");
						var $goodBooksLst = dat.result
						for(var i = 0; i < $goodBooksLst.length; i++) {
							var $gBooksLi = document.createElement('li');
							$gBooksLi.innerHTML = fun_goodBooksTem($goodBooksLst[i], i);
							$GoodBooksDoc.appendChild($gBooksLi);
						}
					}
				},
				error: function(err) {

				}
			});
		}

		/*document.getElementById("commonProblem").addEventListener("tap", function(){
			document.getElementById("bigCPLst").innerHTML = "";
			//href="#jzkt-cjwt-content"
			
		});*/
	</script>

</html>